<template>
  <el-card shadow="hover">
    <div>
      <el-form inline :form="form">
        <el-form-item>
          <el-select v-model="form.batch">
            <el-option :value="1" :label="'2018-2019学年'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.batchYear">
            <el-option :value="1" :label="'上学期'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-divider />

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
          <ve-pie :data="pieChartData" :legend="pieLegend" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
          <el-table border :data="pieChartData.rows">
            <el-table-column prop="日期" label="日期" />
            <el-table-column prop="访问用户" label="访问用户" />
          </el-table>
        </el-col>
      </el-row>

      <el-divider />

      <el-form inline class="d2-text-center">
        <el-form-item label="学院使用量分析" class="d2-font-weight">
          <el-select v-model="faculty">
            <el-option value="1" label="本版选用量从大到小" />
            <el-option value="2" label="教材规模从大到小" />
          </el-select>
        </el-form-item>
      </el-form>
      <ve-histogram :data="barChartData" :legend="barLegend" :grid="grid" />

      <el-divider />

      <el-form inline class="d2-text-center">
        <el-form-item label="学校占比分析" class="d2-font-weight">
          <el-select v-model="faculty">
            <el-option value="1" label="学校占比分析从大到小" />
            <el-option value="2" label="选用量从大到小" />
          </el-select>
        </el-form-item>
      </el-form>
      <ve-line :data="lineChartData" :legend="barLegend" :grid="grid" />

    </div>
  </el-card>
</template>

<script>
import VeHistogram from 'v-charts/lib/histogram.common'
import VeLine from 'v-charts/lib/line.common'
import Pie from 'v-charts/lib/pie.common'

export default {
  name: 'DetailCharts',
  components: {
    [VeHistogram.name]: VeHistogram,
    [VeLine.name]: VeLine,
    [Pie.name]: Pie
  },
  data() {
    return {
      form: {
        batch: '',
        batchYear: ''
      },
      pieLegend: {
        left: 0,
        top: 'center',
        orient: 'vertical'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '6%',
        containLabel: true
      },
      pieChartData: {
        columns: ['日期', '访问用户'],
        rows: [
          { '日期': '1/1', '访问用户': 1393 },
          { '日期': '1/2', '访问用户': 3530 },
          { '日期': '1/3', '访问用户': 2923 },
          { '日期': '1/4', '访问用户': 1723 },
          { '日期': '1/5', '访问用户': 3792 },
          { '日期': '1/6', '访问用户': 4593 }
        ]
      },
      barLegend: {
        bottom: 0
      },
      barChartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      lineChartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
